<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>环境光</title>
  </head>
  <body>
    <script type="module">
      // 引入three.js
      import * as THREE from "three";
      import { scene, camera, controls } from "/src/utils/init.js";

      function createFloor() {
        camera.position.set(5, 5, 5);
        // 1.创建平面缓冲几何体
        const geometry = new THREE.PlaneGeometry(10, 10);
        const material = new THREE.MeshStandardMaterial({
          color: 0xffffff,
          side: THREE.DoubleSide,
        });
        const plane = new THREE.Mesh(geometry, material);
        plane.rotation.set(-Math.PI / 2, 0, 0);
        scene.add(plane);
      }

      function createLight() {
        // 创建环境光
        // const ambientLight = new THREE.AmbientLight(0xffffff, 1);
        // scene.add(ambientLight);

        // 点光源
        // const pointLight = new THREE.PointLight(0xff0000, 1, 100);
        // pointLight.position.set(3, 3, 3);
        // scene.add(pointLight);

        // 点光源辅助对象
        // const helper = new THREE.PointLightHelper(pointLight, 1);
        // scene.add(helper);

        //平行光
        // 从上方照射的白色平行光，强度为 0.5。
        // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        // scene.add(directionalLight);

        // 聚光灯
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(10, 10, 10);
        scene.add(spotLight);

        const spotLightHelper = new THREE.SpotLightHelper(spotLight);
        scene.add(spotLightHelper);
      }

      createFloor();
      createLight();
    </script>
  </body>
</html>
